<template>
  <!-- 短信报警 -->
  <view class="bg-white">
    <!-- 主体内容 -->
    <view class="padding">
      <!-- 标题 -->
      <view v-if="!isIntroduceDetail">
        <view class="text-xl text-primary">{{ $t('JLink.groups.pmsSms') }}</view>
        <view class="text-primary text-sm margin-tb-xs">{{ $t('JLink.describe.pmsSms.introduce') }}</view>
      </view>
      <!-- 支持开通的设备列表 -->
      <device-list v-if="!isIntroduceDetail" :supportDeviceObj="supportDeviceObj" @click="handleSelectDevice">
        <!-- 操作 -->
        <!-- <pmsOrVoesAction v-if="buttonMessage.message.expireTime" :list="actionList" :message="buttonMessage.message"></pmsOrVoesAction> -->
      </device-list>
      <!-- logo -->
      <image :src="`https://statics.xmcsrv.net/weixin/cloud/pmsSms/zh/logo.png`" style="width:100%;"
             mode="widthFix"></image>
      <!-- 广告 -->
      <ads :title="$t('JLink.describe.pmsSms.ads.title')" :list="adList" pathName="pmsSms"></ads>
    </view>
    <!-- 按钮 -->
    <buttons v-if="buttonMessage.fail" :classifyId="classifyId" :message="buttonMessage.message"></buttons>
  </view>
</template>

<script>
import {getDevice} from './mixins'
import pmsOrVoesAction from './module/pmsOrVoesAction/pmsOrVoesAction'
import buttons from './module/buttons/buttons'
import ads from './module/ads/ads'
import deviceList from './module/deviceList/deviceList'

export default {
  mixins: [getDevice],
  components: {
    pmsOrVoesAction,
    deviceList,
    buttons,
    ads
  },
  props: {
    deviceInfo: {
      type: Object,
      default: () => {
        return {
          modalName: null
        }
      }
    }
  },
  data() {
    return {
      isIntroduceDetail: false,
      // 广告列表
      adList: [
        {
          col: 4, list: [
            {
              url: 1,
              title: this.$t('JLink.describe.pmsSms.ads.content.name1'),
              text: this.$t('JLink.describe.pmsSms.ads.content.text1')
            },
            {
              url: 2,
              title: this.$t('JLink.describe.pmsSms.ads.content.name2'),
              text: this.$t('JLink.describe.pmsSms.ads.content.text2')
            },
            {
              url: 3,
              title: this.$t('JLink.describe.pmsSms.ads.content.name3'),
              text: this.$t('JLink.describe.pmsSms.ads.content.text3')
            },
          ]
        },
      ],
      actionList: [
        {name: this.$t('JLink.configs.phones'), icon: 'setPhones', class: 'text-left', type: 'sms'},
        {name: this.$t('JLink.configs.record'), icon: 'record', class: 'text-right', type: 'sms'},
        {name: this.$t('JLink.configs.alramConfig'), icon: 'alarmType', class: 'text-right', type: 'sms'},
      ],
    }
  },
  mounted() {
    if (this.deviceInfo) {
      this.isIntroduceDetail = this.deviceInfo.isIntroduceDetail
    }
  },
  onLoad(opt) {
  },
  onShow() {
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@import '@/common/style/main.css';
</style>